<template>
  <div>
    <h1>订单列表</h1>
  </div>
  <!-- 模糊查询 -->
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input
          v-model="searchForm.keyWord"
          placeholder="请输入关键字"
          clearable
        />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select
          v-model="searchForm.status"
          placeholder="请选择订单状态"
          clearable
          style="width: 180px"
        >
          <el-option
            v-for="item in orderStatusOptions"
            :label="item.dictLable"
            :value="item.dictValue"
            :key="item.dictId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadList()">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-button type="primary" @click="onBuy">购买商品</el-button>
  <!-- 表格 -->
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="orderId" label="订单ID" />
      <el-table-column prop="orderCode" label="订单编号" />
      <el-table-column prop="amount" label="订单金额" />
      <el-table-column prop="createTime" label="下单时间" />
      <el-table-column prop="nickName" label="消费者" />
      <el-table-column prop="prodCount" label="产品数量" />
      <el-table-column
        prop="orderStatus"
        label="订单状态"
        :formatter="formatter"
      />
      <el-table-column label="操作" />
    </el-table>
  </div>
  <!-- 分页 -->
  <div>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="searchForm.pageNum"
        v-model:page-size="searchForm.pageSize"
        :size="size"
        :disabled="disabled"
        :background="background"
        :page-sizes="[2, 3, 4, 5]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!-- 购买对话框 -->
  <div>
    <el-dialog v-model="dialogFormVisible" title="购买商品对话框" width="1200">
      <div>共计:{{ buyAmount }}元</div>
      <el-table
        :data="prodData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column prop="prodId" label="ID" width="50" />
        <el-table-column prop="prodName" label="商品名称" width="200" />
        <el-table-column prop="prodPrice" label="商品价格" width="120" />
        <el-table-column prop="nickName" label="商家" width="100" />
        <el-table-column prop="typeName" label="商品类型" width="120" />
        <el-table-column label="购买数量" width="220">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.buyNum"
              :min="1"
              :max="10"
              @change="handleChange"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" />
      </el-table>
      <!-- 商品分页 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="pageForm.pageNum"
          v-model:page-size="pageForm.pageSize"
          :background="true"
          :page-sizes="[2, 3, 4, 5]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="prodTotal"
          @size-change="handleSizeChangeProd"
          @current-change="handleCurrentChangeProd"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addOrderBuy"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  ElMessage,
  type ComponentSize,
  type TableColumnCtx,
} from "element-plus";
import { onMounted, ref } from "vue";
import { addOrder, getDictList, getOrderList, getProdList } from "../api/api";
const tableData = ref([]);
const total = ref(0);
const searchForm = ref({
  keyWord: null,
  pageNum: 1,
  pageSize: 2,
  status: null,
});
const orderStatusOptions = ref([]);
const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const prodData = ref([]);
const prodTotal = ref(0);
const pageForm = ref({
  pageNum: 1,
  pageSize: 2,
});
const multipleSelection = ref<any[]>([]);
const buyAmount = ref(0.0);

// 下单
const addOrderBuy = () => {
  addOrder(multipleSelection.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("下单成功");
      dialogFormVisible.value = false;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

// 设置商品数量
const handleChange = (value: number | undefined) => {
  console.log(value);
  if (multipleSelection.value.length > 0) {
    buyAmount.value = 0.0;
    multipleSelection.value.forEach((item) => {
      buyAmount.value += item.prodPrice * item.buyNum;
    });
  } else {
    buyAmount.value = 0.0;
  }
};
// 选择商品事件
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
  if (multipleSelection.value.length > 0) {
    buyAmount.value = 0.0;
    multipleSelection.value.forEach((item) => {
      buyAmount.value += item.prodPrice * item.buyNum;
    });
  } else {
    buyAmount.value = 0.0;
  }
};
// 购买弹出框
const onBuy = () => {
  prodList();
  //显示对话框
  dialogFormVisible.value = true;
};
// 每页商品条数触发方法
const handleSizeChangeProd = (val: number) => {
  pageForm.value.pageSize = val;
  prodList();
};
// 当前商品页触发方法
const handleCurrentChangeProd = (val: number) => {
  pageForm.value.pageNum = val;
  prodList();
};
// 动态显示支付状态
const formatter = (row: any, column: TableColumnCtx<any>) => {
  let name = "未知";
  orderStatusOptions.value.forEach((item) => {
    if (item.dictValue == row.orderStatus) {
      name = item.dictLable;
    }
  });
  return name;
};
// 每页条数触发方法
const handleSizeChange = (val: number) => {
  searchForm.value.pageSize = val;
  loadList();
};
// 当前页触发方法
const handleCurrentChange = (val: number) => {
  searchForm.value.pageNum = val;
  loadList();
};
// 获取分页订单列表
const loadList = () => {
  getOrderList(searchForm.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};
const prodList = () => {
  getProdList(pageForm.value).then((res) => {
    if (res.data.code == 200) {
      prodData.value = res.data.data.records;
      prodTotal.value = res.data.data.total;
    }
  });
};

onMounted(() => {
  loadList();
  // 获取订单状态
  getDictList(3).then((res) => {
    orderStatusOptions.value = res.data.data;
  });
});
</script>

<style scoped></style>
